$(function () {
    let state = null
    $('.btn-pud').click(function () {
        state = '已发布'
    })
    $('.btn-cg').click(function () {
        state = '草稿'
    })
    // 配置工具栏
    let toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike', 'image'], // toggled buttons
        ['blockquote', 'code-block'],

        [{
            'header': 1
        }, {
            'header': 2
        }], // custom button values
        [{
            'list': 'ordered'
        }, {
            'list': 'bullet'
        }],
        [{
            'script': 'sub'
        }, {
            'script': 'super'
        }], // superscript/subscript
        [{
            'indent': '-1'
        }, {
            'indent': '+1'
        }], // outdent/indent
        [{
            'direction': 'rtl'
        }], // text direction

        [{
            'size': ['small', false, 'large', 'huge']
        }], // custom dropdown
        [{
            'header': [1, 2, 3, 4, 5, 6, false]
        }],

        [{
            'color': []
        }, {
            'background': []
        }], // dropdown with defaults from theme
        [{
            'font': []
        }],
        [{
            'align': []
        }],

        ['clean'] // remove formatting button
    ];
    // 设置复文本
    let quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: toolbarOptions
        }
    });
    //   设置裁剪区域
    const img = $('#image')
    // 设置配置
    const options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 调用
    img.cropper(options)
    // 封装获取分类函数
    function initCateLIst() {
        $.get('/my/article/cates', function (res) {
            // console.log(res);
            if (res.status === 0) {
                $('[name="cate_id"]').html(template('tmpl-select', res))
                // 两个插件干仗了
                // 让富文本中的下拉菜单忽略美化
                $('.ql-toolbar select').attr('lay-ignore', '')
                // 重新渲染下拉列表
                layui.form.render('select')
                // 让富文本中的下拉菜单隐藏
                $('.ql-toolbar select').css('display', 'none')
            }
        })

    }
    // 调用
    initCateLIst()

    // 给封面按钮注册点击事件
    $('#fmbtn').click(function () {
        // 模拟点击上传图片
        $('#file').click()
    })

    // 绑定change事件
    $('#file').change(function (e) {
        const files = e.target.files
        if (files.length === 0) return
        const url = URL.createObjectURL(files[0])
        // 销毁原来的裁剪区域
        // cropper
        img.cropper('destroy')
        // 为图片的src属性赋值
        img.attr('src', url)
        // 重新定义裁剪区域
        img.cropper(options)
    })

    // 给表单注册submit事件
    $('.form-pud').submit(function (e) {
        e.preventDefault()
        const fd = new FormData()
        // 把标题传进去
        fd.append('title', $('[name="title"]').val().trim())
        // 类别
        fd.append('cate_id', $('[name="cate_id"]').val())
        // 内容
        fd.append('content', quill.root.innerHTML)
        // 按钮
        fd.append('state', state)
        // 图片
        img.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        }).toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            fd.append('cover_img', blob)
            // 把准备好的数据发送
            $.ajax({
                type: 'POST',
                url: '/my/article/add',
                data: fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.status === 0) {
                        location.href = '/article/art_list.html'
                    }
                }
            })
        })
    })
})